
<style>
	.edit-box{
		position: fixed;
	    top: 0px !important;
	    right: 0px !important;
	    left: 0px !important;
	    bottom: 0px !important;
	    z-index: 100;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    
	}
	.edit-box-con{
    	width: 665px;
    	height: 400px;
    	margin: 0 auto;
    	z-index: 100;
    	background: #fff;
    	position: relative;
    	border: 1px solid #e5e5e5;
    }
    .tit{
    	width: 100%;
    	height: 45px;
    	line-height: 45px;
    	text-align: center;
    }
    .detail{
		width: 100%;
		flex: 1;
		padding: 20px;
		flex-direction: column;
	}
	.el-icon-error{
		position: absolute;
		right: 10px;
		top: 10px;
		cursor: pointer;
		color: #666;
		font-size: 20px;
	}
</style>
<template>
	<section class="repair-box">
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-row>
				<el-input style="width:247px" placeholder="维修工手机号" v-model="keyword" clearable @keyup.enter.native="getRepairList"/>
				<!--<input type="tetx" @keyup.enter="search"/>-->
				<el-button type="primary" @click="search">搜索</el-button>	
			</el-row>
		</el-col>
		<el-table :data="repairList" highlight-current-row  ref="multipleTable" style="width: 120%;">
			<el-table-column type="index" label="序号" width="60"></el-table-column>
			<el-table-column prop="mobile" label="手机号" ></el-table-column>
			<el-table-column prop="name" label="维修工姓名" ></el-table-column>
			<el-table-column prop="showStatus" label="状态" >
				<template scope="scope">
					<span>{{scope.row.showStatus?'显示在列表中':'未显示在列表中'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="sort" label="顺序号(值越大，排名越高)" width="200"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" ></el-table-column>
			<el-table-column prop="operator" label="编辑人" ></el-table-column>
			<el-table-column prop="lastUpdateTime" label="编辑时间" ></el-table-column>
			<el-table-column label="操作" >
				<template scope="scope">
					<el-button size="mini" @click="doEdit(scope.row)" type="info" plain >编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" plain >删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" align="right">
			<br>
			<el-pagination 
				@current-change="handleCurrentChange" 
				layout=" prev, pager, next" 
				:page-size="20"
				:current-page.sync="page" 
				:total="pageCount">
			</el-pagination>
		</div>
		<div class="edit-box" v-if="showEditBox">
			<div class="edit-box-con">
				<p class="tit"> 编辑维修工</p>
				<i class="el-icon-error" @click="close"></i>
				<div class="detail" >
					<el-col :span="24" class="toolbar" style="margin-bottom: 30px;">
						手机号*
						<el-input  
							v-model="repairMobile" 
							placeholder="店名" 
							maxlength="11"
							style="width:200px; margin-right: 10px;margin-left: 50px;">
						</el-input>
					</el-col>
					<el-col :span="24" class="toolbar" style="margin-bottom: 30px;">
						维修工姓名*
						<el-input 
							v-model="name" 
							placeholder="地址：城市/区/路" 
							maxlength="20"
							style="width:300px; margin-right: 10px;margin-left: 20px;">
						</el-input>
					</el-col>
					<el-col :span="24" class="toolbar" style="margin-bottom: 10px;">
						<span style="margin-right: 60px;">状态*</span>
						<template >
						  <el-radio v-model="showStatus" label="1">未显示在列表中</el-radio>
						  <el-radio v-model="showStatus" label="2">显示在列表中</el-radio>
						</template>
					</el-col>
					<el-col :span="24" class="toolbar" style="margin-bottom: 30px;">
						顺序号*
						<el-input 
							v-model="sort" 
							type="number"
							style="width:300px; margin-right: 10px;margin-left: 50px;">
						</el-input>
					</el-col>

					<el-col :span="24" class="toolbar" style="margin-top: 10px;text-align: center;">
						<el-button type="primary" @click="saveStore()" style="margin: 0 auto;">保存</el-button>
					</el-col>
				</div>
			</div>
		</div>
	</section>
	
</template>

<script>
	import * as Api from "@/api/Api.js";
	import * as Config from "@/api/Config.js";
	export default {
		data() {
			return {
				repairList: null,
				page: 0,
				pageSize: 20,
				keyword: '',
				pageCount: 0,
				repairData: {},
				showEditBox: false,
				name: '',
				sort: '',
				showStatus: '1',
				repairMobile: '', // 电话号码
				repairId: '',
			}
		},
		methods: {
			search(){
				this.page =  1
				this.getRepairList()
			},
			saveStore(){
				let attr =  !this.repairMobile ? '请填写手机号': !this.name ? '请填写名称': this.repairMobile.length < 11 ? '请填写11位电话号码':''

				if(attr) {
					this.$message({
			          message: attr,
			          type: 'error'
			        });
			        return
				}
				
				let params = {
					repairId: this.repairId,
					mobile: this.repairMobile,
					name: this.name,
					showStatus: this.showStatus == '1' ? false : true,
					sort: this.sort
				}
				Api.updateRepair(this, params).then(res => {
					console.log(res)
					if(res.retCode) {
						this.$message({
				          showClose: true,
				          message: '编辑成功',
				          type: 'success'
				        });
				        this.showEditBox = false
				        this.getRepairList()
					}
				})
				
			},
			close(){
				this.showEditBox = false
			},
			doEdit(item) {
				this.name = item.name
				this.repairMobile = item.mobile
				this.showStatus = item.showStatus ? '2' : '1'
				this.sort = item.sort
				this.showEditBox = true
				this.repairId = item.repairId
			},
			getRepairList() {
				let params = {
					page: this.page-1,
					pageSize: this.pageSize,
					keyword: this.keyword
				}
				Api.getRepairList(this, params).then(res => {
					console.log(res)
					if(res.retCode) {
						this.pageCount = res.data.page.total
						this.repairList = res.data.repairList
					}else{
						this.$message("获取数据失败");
					}
					
				});
			},
			handleDelete(index, item) {
				this.$confirm("确定删除此维修工?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
				.then(() => {
					let params = {
						repairId: item.repairId
					}
					Api.deleteRepair(this, params).then(res => {
						console.log(res)
						res.retCode ? this.getRepairList():this.$message("删除失败");
					})
				
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除"
					});
				});
			},
			handleCurrentChange(val) {
				this.page = val-1;
				this.getRepairList();
			}
		},
		mounted() {
			// 	获取修理工数据
			this.getRepairList()
		},
		watch:{
			keyword(val) {
				if(!val) {
					this.getRepairList()
				}
			}
		}
		
	}
</script>
